<!-- 
【开箱即用】商品sku选择器组件豪华独立版（打造uni插件市场功能最全的SKU选择器组件）
插件名称：vk-data-goods-sku-popup
插件类型：业务型数据驱动组件
作者：VK
如有问题，可加Q群：22466457 反馈
 -->
<template>
	<view class="vk-data-goods-sku-popup" :style="{ zIndex: zIndex }" catchtouchmove="true"
		:class="valueCom && complete ? 'show' : 'none'" @touchmove.stop.prevent="moveHandle" @click.stop="stop">
		<!-- 页面内容开始 -->
		<view class="mask" @click="close('mask')"></view>
		<view class="layer attr-content" :class="{'safe-area-inset-bottom':safeAreaInsetBottom }"
			:style="{ borderRadius: borderRadius + 'rpx ' + borderRadius + 'rpx 0 0' }">
			<view class="specification-wrapper">
				<scroll-view class="specification-wrapper-content" scroll-y="true">
					<view class="specification-header">
						<view class="specification-right">
							<view class="choose">已选：{{ selectArr.join(' ') }}</view>
						</view>
					</view>

					<view class="specification-content">
						<view class="specification-item" v-for="(item, index1) in goodsInfo[specListName]"
							:key="index1">
							<view class="item-title">{{ item.name }}</view>
							<view class="item-wrapper">
								<view class="item-content" v-for="(item_value, index2) in item.list" :key="index2"
									:class="[subIndex[index1] == index2 ? 'actived' : '']" :style="[
										item_value.ishow ? themeColorFn('btnStyle') : '',
										subIndex[index1] == index2 ? themeColorFn('activedStyle') : ''
									]" @click="skuClick(item_value, index1, index2)">
									{{ item_value.name }}
								</view>
							</view>
						</view>

					</view>
				</scroll-view>
				<view class="close" @click="close('close')">
					<uni-icons type='close' size='25'></uni-icons>
				</view>
			</view>

			<view class="btn-wrapper">
				<view class="sure confirm" :style="{
										color: themeColorFn('confirmColor'),
										backgroundColor: themeColorFn('confirmBackgroundColor')
									}" @click="confirm">
					{{ confirmText }}
				</view>
			</view>
		</view>
		<!-- 页面内容结束 -->
	</view>
</template>

<script>
	/* eslint-disable */
	var vk; // vk依赖
	var goodsCache = {}; // 本地商品缓存
	export default {
		name: 'vk-sku-popup',
		emits: ['update:modelValue', 'input', 'update-goods', 'open', 'close', 'confirm'],
		props: {
			// true 组件显示 false 组件隐藏
			value: {
				type: Boolean,
				default: false
			},
			modelValue: {
				type: Boolean,
				default: false
			},
			// 商品表id的字段名
			goodsIdName: {
				type: String,
				default: '_id'
			},
			// spec_list的字段名
			specListName: {
				type: String,
				default: 'spec_list'
			},
			// 点击遮罩是否关闭组件 true 关闭 false 不关闭 默认true
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			// 顶部圆角值
			borderRadius: {
				type: [String, Number],
				default: 0
			},

			// 本地数据源
			localdata: {
				type: Object
			},
			// 加入购物车按钮的文字
			confirmText: {
				type: String,
				default: '确认选择'
			},
			// 加入购物车按钮的字体颜色
			confirmColor: {
				type: String
			},
			// 加入购物车按钮的背景颜色
			confirmBackgroundColor: {
				type: String
			},
			// 不可点击时,按钮的样式
			disableStyle: {
				type: Object,
				default: null
			},
			// 按钮点击时的样式
			activedStyle: {
				type: Object,
				default: null
			},
			// 按钮常态的样式
			btnStyle: {
				type: Object,
				default: null
			},
			// 颜色主题
			theme: {
				type: String,
				default: 'default'
			},

			// 默认选中的SKU
			defaultSelect: {
				type: Object
			},

			// 是否开启底部安全区适配，默认true
			safeAreaInsetBottom: {
				type: Boolean,
				default: true
			},
			zIndex: {
				type: [Number, String],
				default: 990
			}
		},
		data() {
			return {
				complete: false, // 组件是否加载完成
				goodsInfo: {}, // 商品信息
				isShow: true, // true 显示 false 隐藏
				// #ifndef MP-BAIDU
				shopItemInfo: {}, // 存放要和选中的值进行匹配的数据（因百度小程序setData不支持中文字段，故不编译shopItemInfo变量）
				// #endif
				selectArr: [], // 存放被选中的值
				subIndex: [], // 是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
				selectShop: {}, // 存放最后选中的商品
				openTime: 0,
				themeColor: {
					// 默认主题
					default: {
						confirmColor: '#ffffff',
						confirmBackgroundColor: 'rgb(255, 148, 2)',
						btnStyle: {
							color: '#333333',
							borderColor: '#f4f4f4',
							backgroundColor: '#ffffff'
						},
						activedStyle: {
							color: 'rgb(254, 86, 10)',
							borderColor: 'rgb(254, 86, 10)',
							backgroundColor: 'rgba(254,86,10,0.1)'
						},
						disableStyle: {
							color: '#c3c3c3',
							borderColor: '#f6f6f6',
							backgroundColor: '#f6f6f6'
						}
					},
					// 红黑主题
					'red-black': {
						confirmColor: '#ffffff',
						confirmBackgroundColor: 'rgb(85, 85, 85)',
						activedStyle: {
							color: 'rgb(255, 68, 68)',
							borderColor: 'rgb(255, 68, 68)',
							backgroundColor: 'rgba(255,68,68,0.1)'
						}
					},
					// 黑白主题
					'black-white': {
						confirmColor: 'rgb(47, 47, 52)',
						confirmBackgroundColor: 'rgb(235, 236, 242)',
						activedStyle: {
							color: 'rgb(47, 47, 52)',
							borderColor: 'rgba(47,47,52,0.12)',
							backgroundColor: 'rgba(47,47,52,0.12)'
						}
					},
					// 咖啡色主题
					coffee: {
						confirmColor: 'rgb(195, 167, 105)',
						confirmBackgroundColor: 'rgb(243, 238, 225)',
						activedStyle: {
							color: 'rgb(195, 167, 105)',
							borderColor: 'rgb(195, 167, 105)',
							backgroundColor: 'rgba(195, 167, 105,0.1)'
						}
					},
					// 浅绿色主题
					green: {
						confirmColor: 'rgb(99, 190, 114)',
						confirmBackgroundColor: 'rgb(225, 244, 227)',
						activedStyle: {
							color: 'rgb(99, 190, 114)',
							borderColor: 'rgb(99, 190, 114)',
							backgroundColor: 'rgba(99, 190, 114,0.1)'
						}
					}
				}
			};
		},
		created() {
			let that = this;
			vk = that.vk;
			if (that.valueCom) {
				that.open();
			}
		},
		mounted() {},
		methods: {
			// 初始化
			init() {
				let that = this;
				// 清空之前选中相关的数据，为新的商品选择初始化做准备
				that.selectArr = [];
				that.subIndex = [];
				that.selectShop = {};
				that.shopItemInfo = {};
				let specListName = that.specListName;
				// 遍历商品规格列表，为每个规格项初始化选中值为空字符串，选中索引为 -1，表示未选中状态
				that.goodsInfo[specListName].map(item => {
					that.selectArr.push('');
					that.subIndex.push(-1);
				});
			},
			updateValue(value) {
				let that = this;
				if (value) {
					that.$emit('open', true);
					that.$emit('input', true);
					that.$emit('update:modelValue', true);
				} else {
					that.$emit('input', false);
					that.$emit('close', 'close');
					that.$emit('update:modelValue', false);
				}
			},
			// 更新商品信息(库存、名称、图片)
			updateGoodsInfo(goodsInfo) {
				let that = this;
				that.goodsInfo = goodsInfo;
				that.initKey = true;
				if (that.initKey) {
					that.init();
				}
				that.defaultSelectSku();
				that.complete = true;
			},
			async open() {
				let that = this;
				that.complete = false;
				let goodsInfo = that.localdata;
				if (goodsInfo && typeof goodsInfo == 'object' && JSON.stringify(goodsInfo) != '{}') {
					that.updateGoodsInfo(goodsInfo);
					that.updateValue(true);
				} else {
					that.toast('未获取到商品信息', 'none');
					that.$emit('input', false);
					return false;
				}
			},
			// 监听 - 弹出层收起
			close(s) {
				let that = this;
				if (new Date().getTime() - that.openTime < 400) {
					return false;
				}
				if (s == 'mask') {
					if (that.maskCloseAble !== false) {
						that.$emit('input', false);
						that.$emit('close', 'mask');
						that.$emit('update:modelValue', false);
					}
				} else {
					that.$emit('input', false);
					that.$emit('close', 'close');
					that.$emit('update:modelValue', false);
				}
			},
			moveHandle() {
				//禁止父元素滑动
			},
			// sku按钮的点击事件
			skuClick(value, index1, index2) {
				let that = this;
				if (that.selectArr[index1] != value.name) {
					that.$set(that.selectArr, index1, value.name);
					that.$set(that.subIndex, index1, index2);
				} else {
					that.$set(that.selectArr, index1, '');
					that.$set(that.subIndex, index1, -1);
				}
			},
			// 加入购物车
			confirm() {
				let that = this;
				that.selectShop = that.selectArr
				that.$emit('confirm', that.selectArr);
			},
			// 弹窗
			toast(title, icon) {
				uni.showToast({
					title: title,
					icon: icon
				});
			},


			// 主题颜色
			themeColorFn(name) {
				let that = this;
				let {
					theme,
					themeColor
				} = that;
				let color = that[name] ? that[name] : themeColor[theme][name];
				return color;
			},
			defaultSelectSku() {
				let that = this;
				let {
					defaultSelect
				} = that;
			},
			// 用于阻止冒泡
			stop() {},

		},
		// 计算属性
		computed: {
			valueCom() {
				// #ifndef VUE3
				return this.value;
				// #endif

				// #ifdef VUE3
				return this.modelValue;
				// #endif
			},
		},
		watch: {
			valueCom(newVal, oldValue) {
				let that = this;
				if (newVal) {
					that.open();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	/*  sku弹出层 */
	.vk-data-goods-sku-popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		overflow: hidden;

		&.show {
			display: block;
		}

		&.hide {}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.3);
		}

		.layer {
			display: flex;
			width: 100%;
			flex-direction: column;
			position: fixed;
			z-index: 99;
			bottom: 0;
			border-radius: 10rpx 10rpx 0 0;
			background-color: #fff;

			.specification-wrapper {
				width: 100%;
				padding: 30rpx 25rpx;
				box-sizing: border-box;

				.specification-wrapper-content {
					width: 100%;
					max-height: 900rpx;
					min-height: 300rpx;

					&::-webkit-scrollbar {
						/*隐藏滚轮*/
						display: none;
					}

					.specification-header {
						width: 100%;
						display: flex;
						flex-direction: row;
						position: relative;
						margin-bottom: 40rpx;

						.specification-right {
							flex: 1;
							padding: 0 35rpx 0 28rpx;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							justify-content: flex-end;
							font-weight: 500;

							.choose {
								font-size: 28rpx;
								color: #333333;
							}
						}
					}

					.specification-content {
						font-weight: 500;

						.specification-item {
							margin-bottom: 40rpx;

							&:last-child {
								margin-bottom: 0;
							}

							.item-title {
								margin-bottom: 20rpx;
								font-size: 28rpx;
								color: #999999;
							}

							.item-wrapper {
								display: flex;
								flex-direction: row;
								flex-flow: wrap;

								.item-content {
									display: inline-block;
									padding: 10rpx 35rpx;
									font-size: 20rpx;
									border-radius: 10rpx;
									background-color: #ffffff;
									color: #333333;
									margin-right: 20rpx;
									margin-bottom: 16rpx;
									border: 1px solid #f4f4f4;
									box-sizing: border-box;

									&.actived {
										border-color: #fe560a;
										color: #fe560a;
									}

									&.noactived {
										background-color: #f6f6f6;
										border-color: #f6f6f6;
										color: #c3c3c3;
									}
								}
							}
						}
					}
				}

				.close {
					position: absolute;
					top: 30rpx;
					right: 25rpx;
					width: 50rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
				}
			}

			.btn-wrapper {
				display: flex;
				width: 100%;
				height: 120rpx;
				flex: 0 0 120rpx;
				align-items: center;
				justify-content: space-between;
				padding: 0 26rpx;
				box-sizing: border-box;

				.layer-btn {
					width: 335rpx;
					height: 76rpx;
					border-radius: 38rpx;
					color: #fff;
					line-height: 76rpx;
					text-align: center;
					font-weight: 500;
					font-size: 28rpx;
				}

				.sure {
					width: 698rpx;
					height: 68rpx;
					border-radius: 38rpx;
					color: #fff;
					line-height: 68rpx;
					text-align: center;
					font-weight: 500;
					font-size: 28rpx;
					background: #fe560a;
				}
			}
		}
	}
</style>